<template>
  <div class="background">
    <div class="head">
      <div class="ablumName"></div>
      <div class="user">
        <user></user>
      </div>
    </div>
    <div class="midden">
      <img
        class="leftIcon showIcon"
        src="../assets/pngImg/left.png"
        alt=""
        @click="toLeft"
      />
      <div class="middenBlock">
        <transition :name="movePhoto">
          <el-image
            :src="oldShowPhoto.imgPath"
            v-if="istrue"
            fit="cover"
          ></el-image>
        </transition>
        <transition :name="movePhoto">
          <el-image
            v-if="!istrue"
            :src="newShowPhoto.imgPath"
            fit="cover"
          ></el-image>
        </transition>
      </div>
      <img
        class="rightIcon showIcon"
        src="../assets/pngImg/left.png"
        alt=""
        @click="toRight"
      />
    </div>
    <div class="bottom">
      <img
        class="leftIcon"
        src="../assets/pngImg/left.png"
        alt=""
        @click="PageLeft"
      />

      <div class="bottomImg">
        <div
          class="block"
          v-for="img in actionPhotoArr"
          :key="img.pictureId"
          @click="clickIndex(img)"
          :class="{ actionBlock: activePhoto.pictureId == img.pictureId }"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="img.imgPath"
            fit="cover"
          ></el-image>
        </div>
      </div>

      <img
        class="rightIcon"
        src="../assets/pngImg/left.png"
        alt=""
        @click="pageRight"
      />
    </div>
    <div class="footer">
      <div class="left">
        <h3>评论列表</h3>
        <ul class="scrollbar size ulFather" id="style-2">
          <!-- 一大块评论 -->
          <li v-for="comment in commente" class="liFather">
            <img :src="$store.state.baseHttp + comment.userCoverPath" alt="" />
            <h5>{{ comment.userName }}:</h5>
            <label for="">{{ comment.reviewContext }}</label>
            <div class="time">{{ catetime(comment.reviewTime) }}</div>
            <p class="iconp">
              <i
                class="iconpraise2 iconfont"
                id="praise"
                :class="{ changeColor: comment.isLiked }"
                @click="praise(comment)"
              >
                {{ comment.likeCount }}</i
              >
              <i @click="ATuserid(comment)">回复</i>
              <i
                class="iconhuishouzhan iconfont"
                @click="isDeleted(comment)"
                v-if="comment.userId == $store.state.userId"
                >删除</i
              >
            </p>

            <!-- 一小块评论 -->
            <ul class="ulSon">
              <li v-for="children in comment.children" class="liSon">
                <img
                  :src="$store.state.baseHttp + children.userCoverPath"
                  alt=""
                />
                <h5>{{ children.userName }}</h5>
                <i style="font-style: normal; padding: 0 10px; color: #999">
                  回复
                </i>
                <h5 style="color: #14a4dd">@{{ children.toUserName }}:</h5>
                <label class="text">{{ children.reviewContext }}</label>
                <div class="time">{{ catetime(children.reviewTime) }}</div>
                <p class="iconp">
                  <i
                    class="iconpraise2 iconfont"
                    id="praise"
                    :class="{ changeColor: children.isLiked }"
                    @click="praise(children)"
                  >
                    {{ children.likeCount }}</i
                  >
                  <i @click="ATuserid(children)">回复</i>
                  <i
                    v-if="children.userId == $store.state.userId"
                    class="iconhuishouzhan iconfont"
                    @click="isDeleted(children)"
                    >删除</i
                  >
                </p>
              </li>
            </ul>
            <!-- <span class="hiddenComment">查看所有评论</span> -->
          </li>
        </ul>
      </div>
      <div class="right">
        <transition name="slide-right">
          <div class="ATlabel" v-if="ATcomente.userName">
            @{{ ATcomente.userName }}
            <i class="iconfont iconquxiao1" @click="closeATuserid"></i>
          </div>
        </transition>
        <button class="submit" @click="submitComment">发表评论</button>
        <textarea
          placeholder="发一条友善的评论"
          class="CommentTxt"
          v-model="content"
        >
        </textarea>
      </div>
    </div>
  </div>
</template>
<script>
import user from "../components/public/User.vue";

export default {
  components: {
    user,
  },
  data() {
    return {
      likes: [],
      content: "", //输入的评论
      shareId: "",
      istrue: false,
      newShowPhoto: {},
      oldShowPhoto: {},
      //选择照片切换方式
      movePhoto: "picture-left",
      //当前页码
      Page: 1,
      photoArr: [],
      ATcomente: {}, //当前回复的用户
      commente: [],
      //当前展示的照片
      activePhoto: {},
      //照片开始的位置
      start: 0,
      end: 0,
    };
  },
  computed: {
    actionPhotoArr() {
      this.start = (this.Page - 1) * 10;
      if (this.photoArr[this.Page * 10]) {
        this.end = this.Page * 10;
      } else {
        this.end = this.photoArr.length;
      }
      return this.photoArr.slice(this.start, this.end);
    },
    totlePage() {
      return this.photoArr.length % 10 == 0
        ? this.photoArr.length / 10
        : Math.ceil(this.photoArr.length / 10);
    },
  },
  created() {
    //赋值
    this.shareId = this.$route.params.shareId;
    this.getCooke();
    this.getdata();
    this.getcomment();
  },
  activated() {
    //赋值
    this.shareId = this.$route.params.shareId;
    this.getCooke();
    this.getdata();
    this.getcomment();
  },
  mounted() {},
  methods: {
    //梳理时间格式
    catetime(time) {
      let timeArr = time.split("T");
      let childTime = timeArr[1].split("-");
      return timeArr[0] + "  " + childTime[0] + ":" + childTime[1];
    },
    getCooke() {
      let cooke = document.cookie.split(";");
      let updata = {
        token: "",
        userId: "",
        userName: "",
        userCoverPath: "",
      };
      cooke.forEach((item) => {
        let arr = item.split("=");
        let key = arr[0].trim();
        let value = arr[1].trim();
        if (key == "token") {
          updata.token = value;
        }
        if (key == "userId") {
          updata.userId = value;
        }
        if (key == "userName") {
          updata.userName = value;
        }
        if (key == "coverPath") {
          updata.userCoverPath = value;
        }
      });
      this.$store.commit("updataUserData", updata);
      this.$http.defaults.headers["Authorization"] = this.$store.state.token;
    },
    // 获取分享照片
    getdata() {
      this.$http.get("/api/share/" + this.shareId).then((res) => {
        console.log(res.data);
        let Ddata = this.$shareClass.Dimages(res.data);
        Ddata.forEach((img) => {
          let obj = {
            pictureId: img.pictureId,
            imgPath: this.$store.state.baseHttp + img.picturePath,
          };
          this.photoArr.push(obj);
        });
        this.activePhoto = this.photoArr[0];
        this.newShowPhoto = this.photoArr[0];
        this.oldShowPhoto = this.photoArr[1];
      });
    },
    //获取评论
    getcomment() {
      this.$http.get("/api/share/" + this.shareId + "/reviews").then((res) => {
        this.commente = res.data;
        console.log(res.data);
      });
    },
    //评论提交
    submitComment() {
      if (this.content == "") {
        this.$message.error("评论为空！");
        return false;
      }
      let data = {
        Context: this.content,
        ToReviewId: this.ATcomente.reviewId,
        ToUserId: this.ATcomente.userId,
      };
      this.$http
        .post("/api/share/" + this.shareId + "/review", data)
        .then((res) => {
          this.content = "";
          this.$message({
            type: "success",
            message: "发表评论成功！",
          });
          //更新数据
          this.getcomment();
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("提交失败！");
        });
    },
    //评论删除
    deleteCommet(comment) {
      this.$http
        .delete("/api/share/review/" + comment.reviewId)
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getcomment();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //评论点赞 || 取消点赞
    praise(comment) {
      if (!comment.isLiked) {
        console.log(comment);
        let data = {
          Method: "LIKE",
        };
        this.$http
          .post("/api/share/review/" + comment.reviewId, data)
          .then((res) => {});
      } else {
        let data = {
          Method: "NOTLIKE",
        };
        this.$http
          .post("/api/share/review/" + comment.reviewId, data)
          .then((res) => {});
      }
      this.getcomment();
    },
    //点击回复用户
    ATuserid(comment) {
      console.log(document.querySelector("textarea").text);
      this.ATcomente = comment;
    },
    //取消回复用户
    closeATuserid() {
      this.ATcomente = "";
    },
    //点击图片切换
    clickIndex(img) {
      if (this.istrue) {
        //判断那个被元素被隐藏
        if (this.oldShowPhoto == img) {
          return;
        }
        this.newShowPhoto = img;
      } else {
        if (this.newShowPhoto == img) {
          return;
        }
        this.oldShowPhoto = img;
      }
      this.activePhoto = img;
      this.istrue = !this.istrue;
    },
    // 查看右边图片
    toRight() {
      this.movePhoto = "picture-left";
      let index = this.actionPhotoArr.indexOf(this.activePhoto);
      if (index + 1 < this.actionPhotoArr.length) {
        this.clickIndex(this.actionPhotoArr[index + 1]);
      } else {
        this.pageRight();
      }
      // this.autoPage(index+1)
    },
    // 查看左边图片
    toLeft() {
      this.movePhoto = "picture-right";
      let active = this.activePhoto;
      let index = this.actionPhotoArr.indexOf(active);
      console.log(index);
      if (index - 1 >= 0) {
        this.clickIndex(this.actionPhotoArr[index - 1]);
      } else {
        this.PageLeft();
      }
      // this.autoPage(index-1)
    },
    //向右翻页
    pageRight() {
      if (this.Page < this.totlePage) {
        this.Page++;
        this.clickIndex(this.actionPhotoArr[0]);
      } else {
        this.$message.warning("已经是最后一页了！");
      }
    },
    //向左翻页
    PageLeft() {
      if (this.Page > 1) {
        this.Page--;
        this.clickIndex(this.actionPhotoArr[this.actionPhotoArr.length - 1]);
      } else {
        this.$message.warning("已经是第一页了！");
      }
    },
    isDeleted(comment) {
      this.$confirm("此操作将删除该条评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCommet(comment);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped="scoped">
.liFather:hover .iconhuishouzhan {
  opacity: 1;
}

.iconhuishouzhan {
  transition: 0.3s;
  opacity: 0;
}

.changeColor {
  color: #d04364 !important;
}

.size {
  width: 100%;
  height: 94%;
  padding-bottom: 100px;
  box-sizing: border-box;
  background-color: #ffffff;
}

.footer {
  position: relative;
  width: 100%;
  height: 800px;
  background-color: #ffffff;
}

.footer .left {
  height: 100%;
  width: 60%;
  float: left;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: #ffffff;
}

.footer .left h3 {
  font-size: 20px;
}

.footer .left h5 {
  font-weight: 400 !important;
  font-size: 19px;
  font-weight: 600;
  color: #222222;
  display: inline;
  cursor: pointer;
}

.footer .left h5:hover {
  color: #ad9889;
}

.footer .left .ulFather {
  margin-left: 10px;
}

.footer .left .liFather {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 10px;
  border-top: #f1f1f1 solid 1px;
  position: relative;
}

.footer .left .liFather .time {
  position: absolute;
  top: 30px;
  right: 20px;
  font-size: 14px;
  color: #999999;
}

.footer .left .liFather img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  border: #969696 solid 1px;
  vertical-align: top;
  margin-right: 10px;
}

.footer .left .liFather .liSon img {
  width: 25px;
  height: 25px;
  transform: translateY(2px);
}

.footer .left .liSon {
  position: relative;
  margin-left: 35px;
  margin-top: 20px;
}

.footer .left .liSon .time {
  top: 5px;
}

.footer .left .hiddenComment {
  display: inline-block;
  margin-left: 30px;
  margin-top: 10px;
  color: #1aa3cc;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.footer .left .hiddenComment:hover {
  color: #3842f8;
}

.footer .left .iconp {
  margin-top: 22px;
  font-size: 14px;
  color: #999;
}

.footer .left .iconp i {
  font-style: normal;
  margin-right: 30px;
  color: #999;
  cursor: pointer;
}

.footer .left .iconp i:hover {
  color: #1dacdb;
}

.footer .left label {
  display: block;
  font-size: 18px;
  margin-top: 20px;
  color: #333333;
}

.footer .right .CommentTxt {
  resize: none;
  font-size: 13px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #f5f5f6;
  border: 1px solid #e5e9ef;
  overflow: auto;
  border-radius: 4px;
  color: #555;
  width: calc(100% - 30px);
  height: calc(100% - 80px);
  transition: 1s;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 10px;
  padding: 5px 10px;
  line-height: normal;
  outline: none;
}

.footer .right {
  position: absolute;
  height: 300px;
  bottom: 0;
  right: 0;
  width: 40%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 20px;
}

.footer .right .ATlabel {
  height: 20px;
  display: inline-block;
  padding: 5px 10px;
  line-height: 17px;
  background-color: #00a1d6;
  border-radius: 5px;
  color: white;
  margin-bottom: 10px;
  z-index: 2;
}

.footer .right .iconquxiao1 {
  font-size: 12px;
  margin-left: 10px;
  cursor: pointer;
}

.footer .right .iconquxiao1:hover {
  color: #fb3772;
}

.footer .right .submit {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: inline-block;
  background-color: #00a1d6;
  height: 40px;
  border-radius: 10%;
  color: #ffffff;
  padding: 5px 10px;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.footer .right .submit:hover {
  background-color: #00b5e5;
}

.user {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.user .imgs {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 100%;
  border: 2px solid #c9c9c9;
  background-color: #adadad;
  margin-right: 10px;
}

.user .imgs img {
  width: 40px;
  height: 40px;
}

.user span {
  font-size: 20px;
  line-height: 40px;
}

.user i {
  margin-left: 10px;
  font-size: 20px;
  cursor: pointer;
}

.background {
  overflow: auto;
  width: 100%;
  height: 100%;
  background-color: #bebebe;
}

.head {
  position: relative;
  height: 60px;
  width: 100%;
  background: url(../assets/pngImg/head2@2x.png);
  background-size: auto 60px;
  background-position: 174px 0;
}

.block {
  float: left;
  margin-left: 10px;
  top: 50%;
  cursor: pointer;
}

.block:hover .block >>> .el-image {
  opacity: 0.6;
}

.block >>> .el-image {
  border: solid 2px transparent;
  opacity: 1;
  transition: 0.5s;
  transform: scale(1);
}

.actionBlock >>> .el-image {
  text-align: center;
  border: solid 2px #94f9b0;
  opacity: 0.6;
  transform: scale(0.9);
}

.bottom {
  position: relative;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  height: 150px;
}

.bottomImg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
}

.leftIcon,
.rightIcon {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 9;
}

.leftIcon {
  left: 5%;
  transform: translateY(-50%);
}

.rightIcon {
  right: 5%;
  transform: translateY(-50%) rotate(180deg);
}

.showIcon {
  opacity: 0;
  transition: 0.3s;
}

.midden {
  position: relative;
  width: 80%;
  height: 67%;
  background-color: #414141;
  margin: auto;
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 10px;
}

.middenBlock {
  width: 100%;
  height: 100%;
}

.middenBlock >>> .el-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}

.middenBlock >>> .el-image__inner {
  width: auto;
}

.midden:hover .showIcon {
  opacity: 1;
}
</style>
